<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="shortcut icon" href="../content/static/img/favicon.ico">
    <link href="../content/css/common_modal.css" rel="stylesheet">
    <link href="../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../content/static/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
        rel="stylesheet">
    <link href="../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
    <link href="../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">


    <style>
        .fa-female:before {
            color: #fb7cd5;
        }

        .fa-location-arrow:before {
            color: rebeccapurple;
        }

        .fa-mobile-phone:before,
        .fa-mobile:before {
            color: black;
        }

        .fa-map-marker:before {
            color: #1ab394;
        }

        table-th {
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }

        table tr {
            height: 40px;
        }

        #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }

        .projectDetaiTreeWrap {
            width: 320px;
            max-height: 500px;
            padding: 10px 10px 0;
            top: 260px !important;
        }

        .dropdown-ul {
            left: -173px !important;
            right: 0 !important;
            padding: 5px 5px !important;
        }

        .proTreeWrap {
            position: absolute;
            left: 110px !important;
            background: #fff;
            border: 1px solid #ccc;
        }

        .proTreeWrap .btn-wrap {
            margin: 10px 0;
            text-align: center;
            padding-top: 8px;
            border-top: 1px dashed #ccc;
        }

        .checkbox label,
        .radio label {
            padding-left: 15px;
        }

        .search {
            float: left;
            padding: 0px 10px 0px 0px;
        }

        .tooltip-inner {
            max-width: 650px;
            text-align: left;
        }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li><a>商品信息</a></li>
                            <li><a>商品列表</a></li>
                        </ol>
                    </div>
                    <div class="content-wrapper">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>商品名称</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>商品分类</label>
                                            <div>
                                                <select v-select2 id="category">
                                                    <option value='0'>全部</option>
													<option value='1'>新鲜水果</option>
													<option value='2'>海鲜肉类</option>
													<option value='3'>零食饮品</option>
													<option value='4'>三餐食材</option>
													<option value='5'>日用百货</option>
													<option value='6'>每日促销</option>
													<option value='7'>新鲜蔬菜</option>
													<option value='8'>进口红酒</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>入库日期</label>
                                            <div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeStart" type="text"
                                                        class="fill-item timeChoose  revision-time" readonly="readonly">
                                                </div>
                                                <div class="fill-desc">到</div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeEnd" type="text"
                                                        class="fill-item timeChoose  revision-time" readonly="readonly">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>入库人</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>展出状态</label>
                                            <div>
                                                <select v-select2 id="status">
                                                    <option value='0'>全部</option>
                                                    <option value='1'>已上架</option>
                                                    <option value='2'>已下架</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <label class="checkbox-wrapper" style="width: 140px;"><input
                                                    class="revision-checkbox" type="checkbox" id="isFastSell" />
                                                是否促销</label>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                            <a href="javascript:;" class="more">更多<i class="revision-icon-more"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info" style="margin-bottom: 0px">
                                <a class="revision-btn" v-on:click="addShow()">新增</a>
                                <a class="revision-btn" v-on:click="batchDelete()">批量删除</a>&nbsp;&nbsp;
                                <!-- <a class="revision-btn" v-on:click="exportShow()">导入</a>
                                <a class="revision-btn" v-on:click="exportShow()">导出</a> -->
                                <span>总条数：<span>12 条</span></span>&nbsp;&nbsp;
                                <!-- <span>总计金额<span>528,00.00</span></span>&nbsp;&nbsp;
                                <span>实退金额<span>528,00.00</span></span> -->
                            </div>
                        </div>
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th><input class="revision-checkbox" type="checkbox"></th>
                                    <th>商品名称</th>
                                    <th>商品分类</th>
                                    <th>商品图片</th>
                                    <th>零售价格(元)</th>
                                    <th>促销价格(元)</th>
									<th>库存</th>
									<th>基本单位</th>
                                    <th>展出状态</th>
                                    <th>促销状态</th>
                                    <th>入库日期</th>
                                    <th>入库人</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td class="text-nav">
                                        <a href="" data-toggle="modal" v-on:click="detailShow()"><span>菜刀</span></a>
                                    </td>
                                    <td>日用百货</td>
                                    <td></td>
                                    <td class="amount">100.00</td>
                                    <td class="amount">88.00</td>
									<td class="amount">78</td>
									<td>件</td>
                                    <td class="text-danger">已下架</td>
                                    <td><i class="fa fa-close text-danger"></i></td>
                                    <td>2019-08-31</td>
                                    <td>操作员1</td>
                                    <td>
                                        <a href="javascript:;" class="" v-on:click="detailShow()">编辑</a>
                                        <a href="" class="">上架</a>
                                        <a href="" class="">促销</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input class="revision-checkbox" type="checkbox">
                                    </td>
                                    <td class="text-navy">
                                        <a href="" data-toggle="modal" v-on:click="detailShow()"><span>剪刀</span></a>
                                    </td>
                                    <td>日用百货</td>
                                    <td></td>
                                    <td class="amount">100.00</td>
                                    <td class="amount">88.00</td>
									<td class="amount">78</td>
									<td>件</td>
                                    <td class="text-navy">已上架</td>
                                    <td><i class="fa fa-check text-navy"></i></td>
                                    <td>2019-08-31</td>
                                    <td>操作员1</td>
                                    <td>
                                        <a href="javascript:;" class="" v-on:click="detailShow()">编辑</a>
                                        <a href="" class="">下架</a>
                                        <a href="" class="">不促销</a>
                                        <a href="" class="">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 商品新增 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style"
                    v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增商品</h4>
                    <div slot="body" class="clearfix">
                        <div>
                            <h3 class="panel-title">基本信息 </h3>
                        </div>
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div class="form-group">
                                <label class="col-sm-1 control-label">名称</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="商品名称" type="text" />
								</div>
								<label class="col-sm-1 control-label">分类</label>
                                <div class="col-sm-3">
                                    <select class="fill-item">
                                        <option value='1'>新鲜水果</option>
                                        <option value='2'>海鲜肉类</option>
                                        <option value='3'>零食饮品</option>
										<option value='4'>三餐食材</option>
										<option value='5'>日用百货</option>
										<option value='6'>每日促销</option>
										<option value='7'>新鲜蔬菜</option>
										<option value='8'>进口红酒</option>
                                    </select>
								</div>
								<label class="col-sm-1 control-label">单位</label>
                                <div class="col-sm-3">
                                    <select class="fill-item">
                                        <option value='0'>件</option>
                                        <option value='1'>桶</option>
                                        <option value='2'>片</option>
                                        <option value='3'>斤</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">商品图片</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <input id="file-es" multiple name="file-es[]" type="file">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">商品属性<span class="title-tips">没有合适的属性？快去&nbsp;&nbsp;<a
                                            href="javascript:;">商品信息──>商品属性维护</a>&nbsp;&nbsp;页面设置吧</span></h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">型号</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" type="text" placeholder="选填" />
                                </div>
                                <label class="col-sm-1 control-label">品牌</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="品牌" type="text" readonly />
                                </div>
                                <label class="col-sm-1 control-label">颜色</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="颜色" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
								<label class="col-sm-1 control-label">规格</label>
								<div class="col-sm-3">
									<input  placeholder="选填，如“红色长款”" class="fill-item" type="text">
								</div>
                                <label class="col-sm-1 control-label">存储条件</label>
                                <div class="col-sm-3">
                                    <input class="fill-item" placeholder="存储条件" type="text" readonly />
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">附加信息 </h3>
							</div>
							<div class="form-group">
									<label class="col-sm-1 control-label">生产商</label>
									<div class="col-sm-3">
										<input class="fill-item" type="text" placeholder="选填,生产商" />
									</div>
									<label class="col-sm-1 control-label">保质期</label>
									<div class="col-sm-3">
										<input class="fill-item" placeholder="保质期" type="text" readonly />
									</div>
									<label class="col-sm-1 control-label">生产日期</label>
									<div class="col-sm-3">
										<input class="fill-item" placeholder="规格" type="text" />
									</div>
								</div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">生产地省</label>
                                <div class="col-sm-3">
                                    <select data-placeholder="选择省份..." class="fill-item">
                                        <option value="">请选择省份</option>
                                        <option value="110000" hassubinfo="true">北京</option>
                                        <option value="120000" hassubinfo="true">天津</option>
                                        <option value="130000" hassubinfo="true">河北省</option>
                                        <option value="140000" hassubinfo="true">山西省</option>
                                        <option value="150000" hassubinfo="true">内蒙古自治区</option>
                                        <option value="210000" hassubinfo="true">辽宁省</option>
                                        <option value="220000" hassubinfo="true">吉林省</option>
                                        <option value="230000" hassubinfo="true">黑龙江省</option>
                                        <option value="310000" hassubinfo="true">上海</option>
                                        <option value="320000" hassubinfo="true">江苏省</option>
                                        <option value="330000" hassubinfo="true">浙江省</option>
                                        <option value="340000" hassubinfo="true">安徽省</option>
                                        <option value="350000" hassubinfo="true">福建省</option>
                                        <option value="360000" hassubinfo="true">江西省</option>
                                        <option value="370000" hassubinfo="true">山东省</option>
                                        <option value="410000" hassubinfo="true">河南省</option>
                                        <option value="420000" hassubinfo="true">湖北省</option>
                                        <option value="430000" hassubinfo="true">湖南省</option>
                                        <option value="440000" hassubinfo="true">广东省</option>
                                        <option value="450000" hassubinfo="true">广西壮族自治区</option>
                                        <option value="460000" hassubinfo="true">海南省</option>
                                        <option value="500000" hassubinfo="true">重庆</option>
                                        <option value="510000" hassubinfo="true">四川省</option>
                                        <option value="520000" hassubinfo="true">贵州省</option>
                                        <option value="530000" hassubinfo="true">云南省</option>
                                        <option value="540000" hassubinfo="true">西藏自治区</option>
                                        <option value="610000" hassubinfo="true">陕西省</option>
                                        <option value="620000" hassubinfo="true">甘肃省</option>
                                        <option value="630000" hassubinfo="true">青海省</option>
                                        <option value="640000" hassubinfo="true">宁夏回族自治区</option>
                                        <option value="650000" hassubinfo="true">新疆维吾尔自治区</option>
                                        <option value="710000" hassubinfo="true">台湾省</option>
                                        <option value="810000" hassubinfo="true">香港特别行政区</option>
                                        <option value="820000" hassubinfo="true">澳门特别行政区</option>
                                        <option value="990000" hassubinfo="true">海外</option>
                                    </select>
                                </div>
                                <label class="col-sm-1 control-label">生产地市</label>
                                <div class="col-sm-3">
										<select data-placeholder="选择地市..." class="fill-item">
											<option value="">请选择地市</option>
											<option value="110000" hassubinfo="true">北京</option>
											<option value="120000" hassubinfo="true">天津</option>
											<option value="130000" hassubinfo="true">河北省</option>
											<option value="140000" hassubinfo="true">山西省</option>
											<option value="150000" hassubinfo="true">内蒙古自治区</option>
											<option value="210000" hassubinfo="true">辽宁省</option>
											<option value="220000" hassubinfo="true">吉林省</option>
											<option value="230000" hassubinfo="true">黑龙江省</option>
											<option value="310000" hassubinfo="true">上海</option>
											<option value="320000" hassubinfo="true">江苏省</option>
											<option value="330000" hassubinfo="true">浙江省</option>
											<option value="340000" hassubinfo="true">安徽省</option>
											<option value="350000" hassubinfo="true">福建省</option>
											<option value="360000" hassubinfo="true">江西省</option>
											<option value="370000" hassubinfo="true">山东省</option>
											<option value="410000" hassubinfo="true">河南省</option>
											<option value="420000" hassubinfo="true">湖北省</option>
											<option value="430000" hassubinfo="true">湖南省</option>
											<option value="440000" hassubinfo="true">广东省</option>
											<option value="450000" hassubinfo="true">广西壮族自治区</option>
											<option value="460000" hassubinfo="true">海南省</option>
											<option value="500000" hassubinfo="true">重庆</option>
											<option value="510000" hassubinfo="true">四川省</option>
											<option value="520000" hassubinfo="true">贵州省</option>
											<option value="530000" hassubinfo="true">云南省</option>
											<option value="540000" hassubinfo="true">西藏自治区</option>
											<option value="610000" hassubinfo="true">陕西省</option>
											<option value="620000" hassubinfo="true">甘肃省</option>
											<option value="630000" hassubinfo="true">青海省</option>
											<option value="640000" hassubinfo="true">宁夏回族自治区</option>
											<option value="650000" hassubinfo="true">新疆维吾尔自治区</option>
											<option value="710000" hassubinfo="true">台湾省</option>
											<option value="810000" hassubinfo="true">香港特别行政区</option>
											<option value="820000" hassubinfo="true">澳门特别行政区</option>
											<option value="990000" hassubinfo="true">海外</option>
										</select>
									</div>
								<label class="col-sm-1 control-label">生产区县</label>
                                <div class="col-sm-3">
										<select data-placeholder="选择区县..." class="fill-item">
											<option value="">请选择区县</option>
											<option value="110000" hassubinfo="true">北京</option>
											<option value="120000" hassubinfo="true">天津</option>
											<option value="130000" hassubinfo="true">河北省</option>
											<option value="140000" hassubinfo="true">山西省</option>
											<option value="150000" hassubinfo="true">内蒙古自治区</option>
											<option value="210000" hassubinfo="true">辽宁省</option>
											<option value="220000" hassubinfo="true">吉林省</option>
											<option value="230000" hassubinfo="true">黑龙江省</option>
											<option value="310000" hassubinfo="true">上海</option>
											<option value="320000" hassubinfo="true">江苏省</option>
											<option value="330000" hassubinfo="true">浙江省</option>
											<option value="340000" hassubinfo="true">安徽省</option>
											<option value="350000" hassubinfo="true">福建省</option>
											<option value="360000" hassubinfo="true">江西省</option>
											<option value="370000" hassubinfo="true">山东省</option>
											<option value="410000" hassubinfo="true">河南省</option>
											<option value="420000" hassubinfo="true">湖北省</option>
											<option value="430000" hassubinfo="true">湖南省</option>
											<option value="440000" hassubinfo="true">广东省</option>
											<option value="450000" hassubinfo="true">广西壮族自治区</option>
											<option value="460000" hassubinfo="true">海南省</option>
											<option value="500000" hassubinfo="true">重庆</option>
											<option value="510000" hassubinfo="true">四川省</option>
											<option value="520000" hassubinfo="true">贵州省</option>
											<option value="530000" hassubinfo="true">云南省</option>
											<option value="540000" hassubinfo="true">西藏自治区</option>
											<option value="610000" hassubinfo="true">陕西省</option>
											<option value="620000" hassubinfo="true">甘肃省</option>
											<option value="630000" hassubinfo="true">青海省</option>
											<option value="640000" hassubinfo="true">宁夏回族自治区</option>
											<option value="650000" hassubinfo="true">新疆维吾尔自治区</option>
											<option value="710000" hassubinfo="true">台湾省</option>
											<option value="810000" hassubinfo="true">香港特别行政区</option>
											<option value="820000" hassubinfo="true">澳门特别行政区</option>
											<option value="990000" hassubinfo="true">海外</option>
										</select>
									</div>
							</div>
							<div class="form-group">
									<label class="col-sm-1 control-label">所在街道/村落</label>
									<div class="col-sm-7">
										<textarea id="ccomment" name="comment" class="form-control"
											style="height: 34px;"></textarea>
									</div>
								</div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">注意事项</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control"
                                        style="height: 34px;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">说明</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control"
                                        style="height: 34px;"></textarea>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">价格信息</h3>
                            </div>
							<div class="form-group">
									<label class="col-sm-1 control-label">零售价格</label>
									<div class="col-sm-3">
										<input class="fill-item" type="text" placeholder="零售价格" />
									</div>
									<label class="col-sm-1 control-label">促销价格</label>
									<div class="col-sm-3">
										<input class="fill-item" placeholder="促销价格" type="text" readonly />
									</div>
								</div>
                            <div>
                                <h3 class="panel-title">库存信息
                                    <!-- <input class="revision-checkbox" type="checkbox" style="margin-left: 720px"
                                        v-on:click="checkSame($event)">所有仓库预警值相同 -->
								</h3>
								<div class="form-group">
										<label class="col-sm-1 control-label">库存数量</label>
										<div class="col-sm-3">
											<input class="fill-item" type="text" placeholder="库存数量" />
										</div>
									</div>
                            </div>
                            <div>
                                <h3 class="panel-title">其他信息 </h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">展出状态</label>
                                <div class="col-sm-4" style="margin-top: 6px;">
                                    <input type="radio" class="cus-radio" name="status" value="2" checked><span
                                        class="spanchk">上架</span>
                                    <input type="radio" class="cus-radio" name="status" value="1"> <span
                                        class="spanchk">下架</span>
                                </div>
                                <label class="col-sm-2 control-label">促销状态</label>
                                <div class="col-sm-4" style="margin-top: 6px;">
                                    <input type="radio" class="cus-radio" name="load" value="1"><span
                                        class="spanchk">是</span>
                                    <input type="radio" class="cus-radio" name="load" value="0" checked> <span
                                        class="spanchk">否</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">备注</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control"
                                        style="height: 34px;"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div slot="footer" style="text-align:center">
                        <a href="javascript:;" class="revision-btn"> 保存</a>
                        <a href="javascript:;" class="revision-btn-default" v-on:click="this.addModal.close()"> 取消</a>
                    </div>
                </modal>
                <!-- 商品详情 -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style"
                    v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">菜刀</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2>商品详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                            <li style="width: 15%;">
                                <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                    src="../content/static/img/no_pic.png">
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">基本信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li >
                                <em>商品名称</em>
                                <span>【张小泉】菜刀</span>
							</li>
							<li >
								<em>商品分类</em>
								<span>日用百货</span>
							</li>
							<li >
								<em>单位</em>
								<span>台</span>
							</li>
                        </ul>
                        <div>
                            <h3 class="panel-title">商品属性</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li >
                                <em>型号</em>
                                <span>XXX</span>
							</li>
							<li >
								<em>品牌</em>
								<span>张小泉</span>
							</li>
							<li >
								<em>颜色</em>
								<span>黑色</span>
                            </li>
                            <li >
                                <em>规格</em>
                                <span>XXX</span>
							</li>
							<li >
								<em>存储条件</em>
								<span>XXX</span>
							</li>
                        </ul>
                        <div>
                            <h3 class="panel-title">附加信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li >
                                <em>生产商</em>
                                <span>XXX</span>
							</li>
							<li >
								<em>保质期</em>
								<span>-</span>
							</li>
							<li >
								<em>生产日期</em>
								<span>2019-08-31</span>
                            </li>
                            <li >
                                <em>生产地省</em>
                                <span>广东省</span>
							</li>
							<li >
								<em>生产地市</em>
								<span>广州市</span>
                            </li>
                            <li >
								<em>生产区县</em>
								<span>XXX</span>
                            </li>
                            <li class="w-100">
								<em>所在街道/村落</em>
								<span>XXXXXXXXXXX</span>
                            </li>
                            <li class="w-100">
								<em>注意事项</em>
								<span>XXXXXXXXXXX</span>
                            </li>
                            <li class="w-100">
								<em>说明</em>
								<span>XXXXXXXXXXX</span>
							</li>
                        </ul>
                        <div>
                            <h3 class="panel-title">价格信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li >
                                <em>零售价格</em>
                                <span class="amount">25.00元</span>
							</li>
							<li >
								<em>促销价格</em>
								<span class="amount">15.00元</span>
							</li>
                        </ul>
                        <div>
                            <h3 class="panel-title">库存信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li >
                                <em>库存数量</em>
                                <span class="amount">10000把</span>
							</li>
                        </ul>
                        <div>
                            <h3 class="panel-title">其他信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>展出状态</em>
                                <span class="text-navy">上架</span>
                            </li>
                            <li>
                                <em>促销状态</em>
                                <span class="text-danger">否</span>
                            </li>
                        </ul>
                    </div>
                </modal>
            </div>
            <div class="treeWrap projectTreeWrap none" style="width:320px;">
                <div>
                    <input type="text" class="fill-item" v-model="treeModel.searchText"
                        style="display:inline;width:140px;" />
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                        v-on:click="treeModel.search">搜索</a>
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;"
                        v-show="treeModel.searchResultMax>0" v-on:click="treeModel.searchNext">下一个</a>
                </div>
                <ul id="productTree" class="ztree" style="margin-left: -12px;"></ul>
                <div class="btn-wrap">
                    <a href="javascript:;" class="revision-btn-default width56">取消</a>
                    <a href="javascript:;" class="revision-btn width56">确定</a>
                </div>
            </div>

        </div>
    </div>
    <script src="../content/js/lib/vue/vue.min.js"></script>
    <script src="../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../content/js/lib/vue/vue-modal.js"></script>
    <script src="../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../content/js/lib/calendar/calendar.js"></script>
    <script src="../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../content/js/common.js"></script>
    <script src="../content/js/lib/vue/select2.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
    <script src="../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <!-- <script src="../content/static/js/demo/form-advanced-demo.min.js"></script> -->
    <script src="../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#category").select2({
                width: "220px"
            });
            $("#status").select2({
                width: "220px"
            });
            //时间验证
            var calObj = new $.Calendar({
                //time: true,
                skin: 'white'
            });

            $('#costTimeStart').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd').val();
                calObj.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart').val();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });

        })
        var vmData = {
            addModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            treeProject: '',
            treeIds: {
                checkedId: '',
                paramId: ''
            },
            treeModel: {
                searchText: '',
                searchResultMax: 0,
                search: function () {
                    count = 0;
                    treeObj = [];
                    var lastName = vm.treeModel.searchText;
                    treeObj = $.fn.zTree.getZTreeObj("productTree");
                    treeObj.cancelSelectedNode();
                    //通过名称模糊搜索，也可通过Id查找
                    nodes = treeObj.getNodesByParamFuzzy("text", lastName, null);
                    treeObj.selectNode(nodes[0]);
                    vm.treeModel.searchResultMax = nodes.length - 1;
                },
                searchNext: function searchNext() {
                    count++;
                    treeObj.selectNode(nodes[count]);
                    if (count == nodes.length - 1) {
                        count = -1;
                    }
                }
            },
            chkflg: false,
            radioflg: false,
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            addShow: function () {
                vm.addModal.show = true;
                // vm.loadTree(1, 2, "#proTree");
                $('#file-es').fileinput({
                    language: 'zh',
                    uploadUrl: '#',
                    allowedFileExtensions: ['jpg', 'png', 'gif']
                });
                $('.tree').click(function () {
                    if ($(this).hasClass('project')) {
                        $treeWrap = $('.projectDetaiTreeWrap');
                    }
                    var $this = $(this),
                        pos = $this.offset();
                    if ($treeWrap.hasClass('none')) {
                        $treeWrap.css({
                            left: pos.left,
                            top: pos.top + $this.height()
                        }).removeClass('none');
                    } else {
                        $treeWrap.addClass('none');
                    }
                });
                $('.proTreeWrap .btn-wrap a').click(function (e) {
                    var targetClass = e.target.className;
                    if (targetClass.indexOf('btn-success') > -1) {
                        vm.projectId.paramId = vm.projectId.checkedId;
                        if (vm.projectId.paramId === '') {
                            $('.tree.project').html('未选择').addClass('no-project');
                        } else {
                            $('.tree.project').html('已选择').removeClass('no-project');
                        }
                    }
                    $('.proTreeWrap').addClass('none');
                });
                var testdataBsSuggest = $("#test_data").bsSuggest({
                    indexId: 2,
                    indexKey: 1,
                    data: {
                        "value": [{
                            "id": "0",
                            "word": "板",
                            "description": "板"
                        }, {
                            "id": "1",
                            "word": "包",
                            "description": "包"
                        }, {
                            "id": "2",
                            "word": "杯",
                            "description": "杯"
                        }, {
                            "id": "3",
                            "word": "袋",
                            "description": "袋"
                        }, {
                            "id": "4",
                            "word": "个",
                            "description": "个"
                        }, {
                            "id": "5",
                            "word": "公斤",
                            "description": "公斤"
                        }, {
                            "id": "6",
                            "word": "罐",
                            "description": "罐"
                        }, {
                            "id": "7",
                            "word": "毫升",
                            "description": "毫升"
                        }, {
                            "id": "8",
                            "word": "件",
                            "description": "件"
                        }, {
                            "id": "9",
                            "word": "斤",
                            "description": "斤"
                        }, {
                            "id": "10",
                            "word": "卷",
                            "description": "卷"
                        }, {
                            "id": "11",
                            "word": "卡",
                            "description": "卡"
                        }, {
                            "id": "12",
                            "word": "克",
                            "description": "克"
                        }, {
                            "id": "13",
                            "word": "粒",
                            "description": "粒"
                        }, {
                            "id": "14",
                            "word": "米",
                            "description": "米"
                        }, {
                            "id": "15",
                            "word": "瓶",
                            "description": "瓶"
                        }, {
                            "id": "16",
                            "word": "升",
                            "description": "升"
                        }, {
                            "id": "17",
                            "word": "双",
                            "description": "双"
                        }, {
                            "id": "18",
                            "word": "台",
                            "description": "台"
                        }, {
                            "id": "19",
                            "word": "套",
                            "description": "套"
                        }, {
                            "id": "20",
                            "word": "条",
                            "description": "条"
                        }, {
                            "id": "21",
                            "word": "筒",
                            "description": "筒"
                        }, {
                            "id": "22",
                            "word": "箱",
                            "description": "箱"
                        }, {
                            "id": "23",
                            "word": "张",
                            "description": "张"
                        }, {
                            "id": "24",
                            "word": "支",
                            "description": "支"
                        }],
                        "defaults": ""
                    }
                });
            },
            checkSame: function (e) {
                var target = e.target,
                    checkStatus = target.checked;
                if (checkStatus) {
                    vm.$set("chkflg", true);
                } else {
                    vm.$set("chkflg", false);
                }
            },
            detailShow: function () {
                vm.detailModal.show = true;
            },
            setCheckId: function (checkNodes, type) {
                var treeNode = [];
                checkNodes = checkNodes || [];
                var len = checkNodes.length,
                    arr = [];
                while (len) {
                    var treeChildNode = {
                        Id: "",
                        ChildIds: []
                    };
                    var item = checkNodes[len - 1],
                        status = item.getCheckStatus();
                    if (status.checked) {
                        arr.push(item.id);
                        treeChildNode.Id = item.id;
                        if (item.ChildNodes != undefined) {
                            for (var i = 0; i < item.ChildNodes.length; i++) {
                                if (item.ChildNodes[i].getCheckStatus().checked == true)
                                    treeChildNode.ChildIds.push(item.ChildNodes[i].id);
                            }
                        }
                    }
                    treeNode.push(treeChildNode);
                    len--;
                }
                vm.treeProject = JSON.stringify(treeNode);
                vm[type].checkedId = arr.join(',');
            },

        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>